<template>
  <div class='sub-category' v-if="subCate">
    <div class="container">
      <!-- 面包屑 -->
      <SubBread />
<!-- 筛选 -->
<SubFilter/>
<!-- 结果区域 -->
 <div class="goods-list">
        <!-- 排序 -->
        <SubSort />
        <!-- 商品列表 -->
        <ul class="list">
          <li v-for="item in list" :key="item.id">
            <GoodsItem :goods="item"></GoodsItem>
          </li>
        </ul>
        <!-- 加载 -->
        <XtxInfiniteLoading :loading='loading' :finished='finished' @load="getList"/>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch, provide, reactive } from 'vue'
import { useRoute } from 'vue-router'
import SubBread from './components/sub-bread.vue'
import { findcategorySub, findcategorytemp } from '@/api/category'
import SubFilter from './components/sub-filter.vue'
// import XtxCheckbox from '@/components/library/xtx-checkbox.vue'
import SubSort from './components/sub-sort.vue'
import GoodsItem from './components/goods-item.vue'
export default {
  name: 'SubCategory',
  components: { SubBread, SubFilter, SubSort, GoodsItem },
  setup () {
    const route = useRoute()
    const subCate = ref(null)
    const page = ref(1)
    // 封装了一个变量
    const defaultParamsFn = () => {
      return {
        // 分类ID
        categoryId: route.params.id,
        // sortField 排序字段：默认排序 null
        sortField: null, // 取值范围 [publishTime,orderNum,evaluateNum,price]
        // sortMethod <价格>排序规则：asc为正序，desc为倒序，默认为desc
        sortMethod: null,
        // inventory   是否只显示有库存
        inventory: false,
        // onlyDiscount  是否只显示特惠
        onlyDiscount: false,
        // 属性条件数组
        attrs: [],
        // 品牌id
        brandId: null,
        // 页码
        // page: 1,
        // 页容量
        pageSize: 20
      }
    }
    watch(
      () => route.params.id,
      async id => {
      // 没有id就不发送请求了
      // if (!id) return
      // console.log(route)
      // 判断当前路由的路劲是否为二级分类的路劲，如果不是就不发送数据
        if (route.path !== `/category/sub/${id}`) return
        // 接受数据的时候获取id
        const { result } = await findcategorySub(id)
        // console.log(result)
        subCate.value = result
        // 上面数据给到obj新变量
        const obj = defaultParamsFn()
        // 遍历上面的数据 然后跳转的时候要把数据清空带id跳转过去的时候
        for (const key in obj) {
          sortParams[key] = obj[key]
        }
      }, { immediate: true })
    // 传过去给子组件用，父组件传，其他子组件全部可以接收
    provide('subCate', subCate)
    // 调用上面封装的数据给新变量
    const sortParams = reactive(defaultParamsFn())

    provide('sortParams', sortParams)
    // 分页数据
    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)

    const getList = async () => {
      // 刚开始loading为true
      loading.value = true
      // 获取数据
      const { result } = await findcategorytemp({ ...sortParams, page: page.value })
      // 结束了就为false
      loading.value = false
      // console.log(result)
      // list.value = result.items
      console.log(result)
      // 加载分页的数据
      list.value.push(...result.items)
      // 页面加一
      page.value++

      // 如果请求回来的数据小于页容量，就显示加载完毕
      if (result.items.length < sortParams.pageSize) {
        finished.value = true
      }
    }
    //
    watch(
      sortParams, () => {
        // 监听上面的数据 页码归1
        page.value = 1
        // list分页数据为空 数据重置为空
        list.value = []
        // finished重置为false
        finished.value = false
        getList()
      }, { immediate: true })

    return { subCate, list, getList, loading, finished, page }
  }
}
</script>

<style scoped lang="less">
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    li {
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
</style>
